<template>
	<div class="margin-top">
		<Header  @changeLanguage="changeLanguage" />
		<div class="wrap">
			<Title :pageName="title" />
			<SubTitle :pageName="sub_title1" />
			<div class="module" v-if="list1.length > 0">
				<div class="swiper-list">
					<swiper :options="swiperOption">
						<swiper-slide class="swiper-slide" v-for="(item,index) in list1" :key="index">
							<img :src="item.url" />
						</swiper-slide>
						<div class="swiper-pagination" slot="pagination"></div>
					</swiper>
				</div>
				<div class="list">
					<div class="title">
						<span class="t">{{ message }}</span>
						<span class="more" @click="toList(1)">{{ more }}</span>
					</div>
					<div @click="toDetails(item)" class="item" v-for="(item,index) in list1" :key="index">
						<div class="text">{{ item.name }}</div>
						<div class="date">{{ item.date }}</div>
					</div>
				</div>
			</div>
			<SubTitle :pageName="sub_title2" />
			<div class="module" v-if="list2.length > 0">
				<div class="swiper-list">
					<swiper :options="swiperOption">
						<swiper-slide class="swiper-slide" v-for="(item,index) in list2" :key="index">
							<img :src="item.url" />
						</swiper-slide>
						<div class="swiper-pagination" slot="pagination"></div>
					</swiper>
				</div>
				<div class="list">
					<div class="title">
						<span class="t">{{ message }}</span>
						<span class="more" @click="toList(2)">{{ more }}</span>
					</div>
					<div @click="toDetails(item)" class="item" v-for="(item,index) in list2" :key="index">
						<div class="text">{{ item.name }}</div>
						<div class="date">{{ item.date }}</div>
					</div>
				</div>
			</div>
			<SubTitle :pageName="sub_title3" />
			<div class="module" v-if="list3.length > 0">
				<div class="swiper-list">
					<swiper :options="swiperOption">
						<swiper-slide class="swiper-slide" v-for="(item,index) in list3" :key="index">
							<img :src="item.url" />
						</swiper-slide>
						<div class="swiper-pagination" slot="pagination"></div>
					</swiper>
				</div>
				<div class="list">
					<div class="title">
						<span class="t">{{ message }}</span>
						<span class="more" @click="toList(3)">{{ more }}</span>
					</div>
					<div @click="toDetails(item)" class="item" v-for="(item,index) in list3" :key="index">
						<div class="text">{{ item.name }}</div>
						<div class="date">{{ item.date }}</div>
					</div>
				</div>
			</div>
			<SubTitle :pageName="sub_title4" />
			<div class="module" v-if="list4.length > 0">
				<div class="swiper-list">
					<swiper :options="swiperOption">
						<swiper-slide class="swiper-slide" v-for="(item,index) in list4" :key="index">
							<img :src="item.url" />
						</swiper-slide>
						<div class="swiper-pagination" slot="pagination"></div>
					</swiper>
				</div>
				<div class="list">
					<div class="title">
						<span class="t">{{ message }}</span>
						<span class="more" @click="toList(4)">{{ more }}</span>
					</div>
					<div @click="toDetails(item)" class="item" v-for="(item,index) in list4" :key="index">
						<div class="text">{{ item.name }}</div>
						<div class="date">{{ item.date }}</div>
					</div>
				</div>
			</div>
			<SubTitle :pageName="sub_title5" />
			<div class="module" v-if="list5.length > 0">
				<div class="swiper-list">
					<swiper :options="swiperOption">
						<swiper-slide class="swiper-slide" v-for="(item,index) in list5" :key="index">
							<img :src="item.url" />
						</swiper-slide>
						<div class="swiper-pagination" slot="pagination"></div>
					</swiper>
				</div>
				<div class="list">
					<div class="title">
						<span class="t">{{ message }}</span>
						<span class="more" @click="toList(5)">{{ more }}</span>
					</div>
					<div @click="toDetails(item)" class="item" v-for="(item,index) in list5" :key="index">
						<div class="text">{{ item.name }}</div>
						<div class="date">{{ item.date }}</div>
					</div>
				</div>
			</div>

		</div>
		<Footer />
	</div>
</template>

<script>
	import {
		project,
		more
	} from "@/lang";
	import Header from "@/components/Header";
	import Title from "@/components/Title";
	import Footer from "@/components/Footer";
	import SubTitle from "@/components/SubTitle";
	import {
		getProjectPage
	} from "@/api";
	export default {
		name: "policy",
		components: {
			Header,
			Title,
			Footer,
			SubTitle
		},
		data() {
			return {
				title: "",
				langCode: '',
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				list5: [],
				sub_title1: '',
				sub_title2: '',
				sub_title3: '',
				sub_title4: '',
				sub_title5: '',
				project: project,
				more: '',
				langMore: more,
				message: '',
				swiperOption: {
					//显示分页
					pagination: {
						el: '.swiper-pagination'
					},
					//自动轮播
					autoplay: {
						delay: 2000,
						//当用户滑动图片后继续自动轮播
						disableOnInteraction: false,
					},
					//开启循环模式
					loop: true
				}
			};
		},
		created() {
			const lang = localStorage.getItem("lang");
			this.langCode = lang === "ZH" ? 0 : 1;
			this.setPageLanguage(lang);
			this.onSend();
		},
		methods: {
			onSend() {
				this.getList();
			},
			async getList() {
				let self = this;
				const res = await getProjectPage({
					lang: self.langCode,
				});
				for (const item in res) {
					res[item].forEach(ite => {
						ite['url'] = `${process.env.VUE_APP_BASE_API}/${ite.image}`;
					})

				}
				this.list1 = res.project_1;
				this.list2 = res.project_2;
				this.list3 = res.project_3;
				this.list4 = res.project_4;
				this.list5 = res.project_5;
			},
			setPageLanguage(_lang) {
				const lang = _lang.toLowerCase();
				this.title = this.project.title[lang];
				this.sub_title1 = this.project.sub_title[0][lang];
				this.sub_title2 = this.project.sub_title[1][lang];
				this.sub_title3 = this.project.sub_title[2][lang];
				this.sub_title4 = this.project.sub_title[3][lang];
				this.sub_title5 = this.project.sub_title[4][lang];
				this.more = this.langMore[lang];
				this.message = this.project.message[lang];
			},
			changeLanguage(lang) {
				this.langCode = lang === "ZH" ? 0 : 1;
				this.setPageLanguage(lang);
				this.onSend();
			},
			toList(type) {
				this.$router.push({
					path: '/project_list',
					query: {
						type: type
					}
				})
			},
			toDetails(item) {
				localStorage.setItem("details", JSON.stringify(item));
				this.$router.push({
					path: "/details_page",
				});
			},
		},
	};
</script>

<style scoped lang="less">
	.wrap {
		width: 1200px;
		margin: 0 auto;
		min-height: 45vh
	}

	.module {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.swiper-list {
			width: 50%;

			img {
				width: 100%
			}
		}
	}

	.list {
		width: 570px;

		.item {
			display: flex;
			justify-content: space-between;
			height: 50px;
			line-height: 50px;
			cursor: pointer;

			.text {
				padding-left: 15px;
				width: 400px;
				word-break: keep-all;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.date {
				padding-right: 15px;
			}
		}
		.item:hover{
			color:#255389
		}
		.item:nth-of-type(even) {
			background-color: #eeeaf3;
		}

		.title {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 15px;

			.t {
				font-size: 18px;
				font-weight: 600;
				color: #255389
			}

			.more {
				color: #255389;
				cursor: pointer;
			}

			.more:hover {
				text-decoration: underline;
			}
		}
	}
</style>
